<template>
  <view class="f_column_center">
    <view class=" f_row_center" style="margin-bottom: 15rpx">
      <image :src="item.img" style="height: 80rpx;width: 80rpx;;margin-right: 8rpx"/>
      <view class="title-cls" :style="{'color':item.color}">{{ item.title }}</view>
    </view>

    <view  style="color: rgba(255,255,255,0.4);font-size: 24rpx;text-align: center">
      <view>
        <span>
            <span class="span-cls">
      {{ item.num }}
            </span>
          {{ item.hint }}
        </span>

        <br/>
        <span>
    <span class="span-cls">
        {{ item.area }}
        </span>
          m²
        </span>

      </view>
    </view>


  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";
import FormatCount from "@/mixins/FormatCount";
import {mixins} from "vue-class-component";

@Component({
  components: {}
})
export default class ItemHeadDataView extends mixins(Vue, FormatCount) {
  @Prop() item?: any;


  get area() {
    return this.formatArea(this.item.area)
  }
}
</script>

<style scoped>
.head-card {
  background: #EFF4FF;
  border-radius: 20rpx;
  padding: 30rpx;
}

.content-text {
  color: #969696;
  font-size: 24rpx;
}

.title-cls {
  color: #3F77F4;
  font-weight: bold;
  font-size: 30rpx;
}
.span-cls{
  font-size: 30rpx;color: #ffffff;
  margin-right: 5rpx;
}
</style>